TypeScript 简介

┌─────────────────────────────────────┐
│          TypeScript                 │
│  ┌───────────────────────────────┐  │
│  │      JavaScript               │  │
│  │  (ECMAScript 标准)            │  │
│  └───────────────────────────────┘  │
│  + 静态类型系统                      │
│  + 接口 (Interface)                 │
│  + 泛型 (Generics)                  │
│  + 装饰器 (Decorators)              │
│  + 枚举 (Enums)                     │
│  + 命名空间 (Namespaces)            │
└─────────────────────────────────────┘

// 基础类型
let name: string = "TypeScript";
let version: number = 5.0;
let isPopular: boolean = true;
 
// 数组类型
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];
 
// 对象类型
interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
}
 
let user: User = {
  id: 1,
  name: "Alice"
};

// 定义接口
interface Point {
  x: number;
  y: number;
}
 
// 使用接口
function printPoint(point: Point): void {
  console.log(`(${point.x}, ${point.y})`);
}
 
printPoint({ x: 10, y: 20 }); // 输出: (10, 20)
 
// 接口继承
interface Point3D extends Point {
  z: number;
}

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}
 
let output1 = identity<string>("hello"); // 类型为 string
let output2 = identity(123); // 类型为 number (类型推断)
 
// 泛型接口
interface Container<T> {
  value: T;
}
 
let numberContainer: Container<number> = { value: 123 };
let stringContainer: Container<string> = { value: "hello" };

// 类定义
class Animal {
  private name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  public speak(): void {
    console.log(`${this.name} makes a sound.`);
  }
}
 
// 继承
class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }
  
  public speak(): void {
    console.log(`${this.name} barks.`);
  }
}
 
const dog = new Dog("Buddy");
dog.speak(); // 输出: Buddy barks.

let x = 10; // 推断为 number 类型
let y = "hello"; // 推断为 string 类型
 
// 函数返回值推断
function add(a: number, b: number) {
  return a + b; // 返回类型推断为 number
}

// ========== JavaScript ==========
function greet(name) {
  return "Hello, " + name;
}
 
let result = greet(123); // 运行时不会报错,但结果不符合预期
console.log(result); // "Hello, 123"
 
// ========== TypeScript ==========
function greet(name: string): string {
  return "Hello, " + name;
}
 
let result = greet(123); // 编译时报错:类型"number"的参数不能赋给类型"string"的参数

# 使用 npm 安装
npm install -g typescript
 
# 验证安装
tsc --version
 
# 或使用 npx(无需全局安装)
npx tsc --version

# 在项目中安装
npm install --save-dev typescript
 
# 使用 npx 运行
npx tsc --version

# Node.js 类型定义
npm install --save-dev @types/node
 
# 常用库的类型定义(例如 lodash)
npm install --save-dev @types/lodash

{
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true
}

// settings.json
{
    "typescript.inlayHints.parameterNames.enabled": "all",           // 显示函数参数名
    "typescript.inlayHints.parameterTypes.enabled": true,            // 显示回调参数类型
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,   // 显示函数返回类型
    "typescript.inlayHints.variableTypes.enabled": true,             // 显示变量类型
    "typescript.inlayHints.propertyDeclarationTypes.enabled": true,  // 显示属性声明类型
    "typescript.inlayHints.enumMemberValues.enabled": true           // 显示枚举成员值
}

// 开启 Inlay Hints 后的代码显示效果：
 
//              ↓ 参数名提示     ↓ 参数名提示
function greet(name: string, age: number) {}
greet('linbudu', 20);
 
// ↓ 返回类型提示
const fn = () => 'hello';  // : string
 
// ↓ 变量类型提示
const obj = { name: 'linbudu' };  // : { name: string }
 
// ↓ 属性类型提示
interface User {
    name;  // : string（从默认值推断）
}

# ts-node：直接运行 .ts 文件
npx ts-node src/index.ts
 
# ts-node-dev：文件变更自动重启
npx ts-node-dev src/index.ts
 
# tsx：基于 esbuild 的极速运行器（推荐）
npx tsx src/index.ts
 
# 在 tsconfig.json 中配置
{
    "ts-node": {
        "compilerOptions": {
            "module": "commonjs"
        }
    }
}

// hello.ts
 
// 定义接口
interface Greeting {
  message: string;
  timestamp: Date;
}
 
// 创建问候对象
const greeting: Greeting = {
  message: "Hello, TypeScript!",
  timestamp: new Date()
};
 
// 打印问候信息
function printGreeting(greeting: Greeting): void {
  console.log(`${greeting.message} - ${greeting.timestamp.toLocaleString()}`);
}
 
printGreeting(greeting);

# 编译单个文件
tsc hello.ts
 
# 编译后生成 hello.js 文件
node hello.js

# 安装 ts-node
npm install -g ts-node typescript
 
# 初始化项目
tsc --init
 
# 创建并执行 TS 文件
ts-node index.ts

# 安装 ts-node-dev
npm install -g ts-node-dev
 
# 使用热重载
ts-node-dev --respawn --transpile-only app.ts

# 创建项目
npm create vite@latest my-ts-app -- --template react-ts
 
# 启动开发服务器
cd my-ts-app
npm install
npm run dev
 
# 生产构建
npm run build

{
  "compilerOptions": {
    "target": "ES2020",          // 编译目标版本
    "module": "commonjs",        // 模块系统
    "outDir": "./dist",          // 输出目录
    "rootDir": "./src",          // 源码目录
    "strict": true,              // 启用严格模式
    "esModuleInterop": true,     // ES 模块互操作性
    "skipLibCheck": true,        // 跳过库检查
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

# 使用 tsconfig.json 配置编译
tsc
 
# 监听文件变化,自动编译
tsc --watch

my-typescript-project/
├── src/
│   ├── index.ts
│   ├── utils/
│   │   └── helpers.ts
│   └── types/
│       └── index.ts
├── dist/                   # 编译输出目录
├── node_modules/
├── package.json
├── tsconfig.json
└── README.md

interface Foo {
  name: string
  age: number
}
 
interface Bar {
  name: string
  job: string
}
 
declare let foo: Foo
declare let bar: Bar
 
// 类型不兼容,会产生编译错误
foo = bar // Error: Property 'age' is missing in type 'Bar' but required in type 'Foo'.

npm install -D tsd

import { expectType, expectAssignable } from "tsd"
 
// 检查类型是否完全匹配
expectType<string>("linbudu") // √
expectType<string>(599) // × Error
 
// 检查类型是否可赋值
interface User {
  name: string
  age?: number
}
 
const user: User = { name: "linbudu" }
expectAssignable<User>(user) // √

入门阶段
├── TypeScript 基础语法
├── 静态类型系统
├── 接口和类型别名
└── 函数类型定义
 
进阶阶段
├── 类和面向对象编程
├── 泛型编程
├── 高级类型(联合类型、交叉类型)
└── 类型守卫和类型推断
 
高级阶段
├── 装饰器
├── 命名空间和模块
├── 声明文件编写
└── 类型体操
 
实战应用
├── React + TypeScript
├── Vue + TypeScript
├── Node.js + TypeScript
└── 构建开源项目

# 查找类型定义包
npm search @types/[库名]

// 方案1: 使用 any 类型(不推荐)
declare module 'some-library';
 
// 方案2: 创建本地类型定义文件
// types/some-library.d.ts
declare module 'some-library' {
  export function someFunction(param: string): number;
}
 
// 方案3: 使用 @ts-ignore 临时忽略(不推荐)
// @ts-ignore
import { someFunction } from 'some-library';